<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Group 和 Divider 在同一行显示</title>
    <style>
        .container {
            display: flex;
            align-items: center; /* 确保容器内元素在垂直方向上居中对齐 */
            justify-content: center;
            flex-wrap: nowrap;
        }

        .menu-group {
            display: flex;
            flex-direction: column; /* 使按钮组和标题垂直排列 */
            align-items: center;
            padding: 10px;
        }

        .buttons {
            display: flex; /* 使按钮水平排列 */
            align-items: center;
        }

        .menu-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 5px 10px;
            cursor: pointer;
            background-color: transparent;
            border: none;
            margin-right: 5px; /* 为按钮之间提供间距 */
        }

        .menu-item img {
            width: 24px;
            height: 24px;
            margin-bottom: 5px;
        }

        .menu-item:last-child {
            margin-right: 0;
        }

        .group-title {
            text-align: center;
            margin-top: 10px;
        }

        .divider {
            height: 100px; /* 调整以符合设计要求 */
            width: 1px;
            background-color: #767373;
            margin: 0 20px;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="menu-group" id="group-row-column">
        <div class="buttons">
            <button class="menu-item" id="draw-table">
                <img src="imgs/insert_table.png" alt="绘制表格" class="icon">绘制表格
            </button>
            <button class="menu-item" id="erase">
                <img src="imgs/insertr.png" alt="插入行" class="icon">插入行
            </button>
            <button class="menu-item" id="delete">
                <img src="imgs/insertc.png" alt="插入列" class="icon">插入列
            </button>
            <button class="menu-item" id="delRow">
                <img src="imgs/deleteRow.png" alt="删除行" class="icon">删除行
            </button>
            <button class="menu-item" id="delCol">
                <img src="imgs/deleteCol.png" alt="删除列" class="icon">删除列
            </button>
        </div>
        <div class="group-title">行和列</div>
    </div>
    
    <div class="divider"></div>
    
    <div class="menu-group" id="group-merge-split">
        <div class="buttons">
            <button class="menu-item" id="merge-cells">
                <img src="imgs/merge.png" alt="合并单元格" class="icon">合并单元格
            </button>
            <button class="menu-item" id="split-table">
                <img src="imgs/split.png" alt="拆分表格" class="icon">拆分表格
            </button>
          
        </div>
        <div class="group-title">合并拆分</div>
    </div>
</div>

</body>
</html>
